<template>
  <div style="width: 95%;margin: 0 auto;">
    <div v-if="isNotEmpty">
      <div  v-for="(data,index) in scoreList">
        <divider>序号-{{index+1}}</divider>
        <group>
          <div>
            <card>
              <div slot="content" class="card-demo-flex card-demo-content01">
                <div class="vux-1px-l vux-1px-r">
                  积分类别
                  <br/>
                  <span>{{data.scoreType}}</span>
                </div>
                <div class="vux-1px-r">
                  申请积分
                  <br/>
                  <span>{{data.selfScore}}</span>
                </div>
                <div>
                  申请月度
                  <br/>
                  <span>{{data.month}}</span>
                </div>
              </div>
            </card>
            <div>
              <cell
                title="详情"
                is-link
                :border-intent="false"
                :arrow-direction="showContent[index] ? 'up' : 'down'"
                @click.native="showDetail(index)"></cell>

                <template v-if="showContent[index]">
                  <div class="detial-form">
                    <div>
                      <label class="detial-form__label">员工名</label>
                      <span class="detial-form__value">{{data.userName}}</span>
                    </div>
                    <div>
                      <label class="detial-form__label">积分项</label>
                      <span class="detial-form__value">{{data.category}}</span>
                    </div>
                    <div>
                      <label class="detial-form__label">描 述</label>
                      <span class="detial-form__value">{{data.description}}</span>
                    </div>
                    <div>
                      <label class="detial-form__label">最终状态</label>
                      <span class="detial-form__value">{{data.finalStatus}}</span>
                    </div>
                    <div>
                      <label class="detial-form__label">最终分</label>
                      <span class="detial-form__value">{{data.auditScore}}</span>
                    </div>
                  </div>
                </template>
            </div>
          </div>
          <div class="btn_wrap" v-if="data.scoreStatus == 1">
            <flexbox>
              <flexbox-item>
                <x-button :disabled="disable[index]" type="primary" @click.native="nextStep(2,data.id,index)">{{ $t('next step') }}</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button plain :disabled="disable[index]" type="primary" @click.native="updateScore(data.id,index)">{{ $t('update') }}</x-button>
              </flexbox-item>
            </flexbox>
          </div>
        </group>
      </div>
    </div>
    <div v-else><span>暂无新申请的额外积分</span></div>
  <toast v-model="tosat1" type="text">操作成功</toast>
  <toast v-model="tosat2" type="text">请输入数字</toast>
  </div>
</template>

<i18n>
next step:
  zh-CN: 通 过
done:
  zh-CN: 提 交
update:
  zh-CN: 修 改
</i18n>

<script>
import { Cell, CellFormPreview, Confirm, XButton, XHr, Card, FlexboxItem, Flexbox, Divider, Toast } from 'vux'

export default {
  components: {
    Cell,
    CellFormPreview,
    Confirm,
    Card,
    XButton,
    XHr,
    FlexboxItem,
    Flexbox,
    Divider,
    Toast
  },
  data () {
    var routerParams = this.$route.query.userId
    return {
      scoreList: [],
      disable: [],
      name: '',
      staffId: '',
      month: '',
      isNotEmpty: true,
      userId: routerParams,
      showContent: [],
      showContent002: false,
      tosat1: false,
      tosat2: false
    }
  },
  mounted: function () {
    this.getScoreInfo()
  },
  methods: {
    nextStep (scoreStatus, paramid, index, score) {
      var self = this
      self.$set(self.disable, index, true)
      self.$ajax({
        method: 'post',
        url: '../wx/userAdditional/save',
        data: {
          id: paramid,
          status: scoreStatus,
          tLScore: score
        }
      })
      .then(function (res) {
        self.tosat1 = true
      })
      .catch(function (err) {
        console.log(err)
      })
    },
    getScoreInfo: function () {
      var self = this
      self.$ajax({
        method: 'get',
        url: '../wx/userAdditional/search',
        params: {
          userId: self.userId,
          departmentCode: '010101'
        }
      })
      .then(function (res) {
        self.scoreList = res.data.data
        if (self.scoreList.length > 0) {
          self.isNotEmpty = true
        } else {
          self.isNotEmpty = false
        }
      })
      .catch(function (err) {
        console.log(err)
      })
    },
    showDescription (msg) {
      this.$vux.confirm.show({
        title: '详情',
        content: msg,
        onShow () {
        },
        onHide () {
        },
        onCancel () {
        },
        onConfirm () {
          console.log('plugin confirm')
        }
      })
    },
    updateScore: function (param, index) {
      var self = this
      self.$vux.confirm.prompt('填入数字', {
        title: '审核新分数',
        onShow () {
          self.$vux.confirm.setInputValue()
        },
        onHide () {
        },
        onCancel () {
        },
        onConfirm (msg) {
          if (msg > 0) {
            self.nextStep(3, param, index, msg)
          } else {
            self.tosat2 = true
          }
        }
      })
    },
    showDetail: function (index) {
      var self = this
      console.log(self.showContent[index])
      if (self.showContent[index] === undefined) {
        self.$set(self.showContent, index, true)
      } else {
        self.$set(self.showContent, index, !self.showContent[index])
      }
      console.log(self.showContent[index])
      console.log(self.showContent)
    },
  }
}

</script>

<style lang="less">
.btn_wrap {
  padding: 0 1rem;
}
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
.detial-form {
    padding: 10px 15px;
    font-size: .9em;
    text-align: right;
    color: #999999;
    line-height: 2;
}
.detial-form__label {
    float: left;
    margin-right: 1em;
    min-width: 4em;
    color: #999999;
    text-align: justify;
    text-align-last: justify;
}
.detial-form__value {
    display: block;
    overflow: hidden;
    word-break: normal;
    word-wrap: break-word;
}
</style>
